<#include "/front/layout/__layout.ftl">

<@html>
<style>
@media screen and (max-width: 520px) {
.qing-container {
	margin-top: 2.1rem;
}	
}
@media screen and (max-width: 320px) {
.qing-container {
	margin-top: 1.9rem;
}	
}
</style>
<div class="main main-cover">
	<div class="title">请选择科室</div>
	<div class="doctor-content">
	<div class="mian_l">
		<#list list as s>
			<div class="department <#if s_index == 0>icon-hover<#else>icon1</#if>" id="${s.id}">
				<#if s_index <= 11>
					<div class="tu"><img src="${ctx}/front/images/${s_index+1}.png"></div>
				<#else>
					<div class="tu"><img src="${ctx}/front/images/${s_index%11}.png"></div>
				</#if>
				<h3>${s.name}</h3>
			</div>
		</#list>
		
		<#if list?size>
			<input type="hidden" id="deparmentId" value="${list[0].id}">
		</#if>
		
	</div>
	<div class="main_r_h">
	</div>
	</div>
</div>


</@html>

<script type="text/javascript">

$(function () {
	   
	   var page,number=0,id = $("#deparmentId").val();
	   load(number,id,true);
	  
	   $(".department").hover(function(){
		  	$(this).addClass("icon-hover").removeClass("icon1")
		  	$(this).siblings().addClass("icon1").removeClass("icon-hover")
		  	var departId = $(this).attr("id");
		  	$("#deparmentId").val(departId);
		  	load(0,departId,true);
	   })
	   
       $(window).scroll(function(){
		　　var scrollTop = $(this).scrollTop();
		　　var scrollHeight = $(document).height();
		　　var windowHeight = $(this).height();
		   id = $("#deparmentId").val();
		　　if((scrollTop + windowHeight) - (scrollHeight-11) >= 10){
		   		var test = number+1;
		   		
		   		if(test < page){
		   			load(test,id,false);
		   		}else{
		   			/*layer.msg("没有了");*/
		   		}
		   		var sh = document.body.scrollHeight/2 - 259; 
		　　　　	window.scrollTo(0, sh);
		　　}
		});
		
		function load(a,b,flag){
			$.ajax({
					    type: "POST",
					    dataType: "json",
					    async: false,
					    data:{"pageNumber":a,"deparmentId":b},
					    url: "${ctx!}/api/doctor-list",
			            success: function(msg){
			            		page = msg.totalPages ;
			            		number = msg.number;
			            		if(flag){
			            			$(".main_r_h").html("");
			            			//number = 1 ;
			            		}
			            
								var lis = [];
				                for(var i = 0; i < msg.content.length; i++){
				                	var obj = msg.content[i]; 
		
				                	var str = '<div class="doctor1" title="'+obj.skilled+'"><a href="${ctx!}/doctordetail/'+obj.id+'">';
										str += '	<div class="toux1"><img src="'+obj.logo+'"></div>';
										str += '		<h2>'+obj.name+'</h2>';
										str += '		<h3>'+obj.chiefPhysician+'</h3>';
										str += '		<h4>'+obj.departmentName+'</h4>';
										str += '		<h5>'+obj.hospital+'<br/>'+obj.skilled.substring(0,25)+'...</h5>';
										str += '	</div>';
										str += '</a></div>';
										
										lis.push(str);
										 
				                }
				                
				                $(".main_r_h").append(lis);
			            },
			            error: function(jqXHP,textStatus,errorThrown){
			                layer.alert(jqXHP.responseText);
			            }
			})
		}
})
</script>
